<template>
  <el-card class="box-card">
    <div class="header">
      <el-input
        v-model="listQuery.clientId"
        placeholder="clientId"
        size="small"
        style="width: 300px;"
        class="filter-item"
        @keyup.enter.native="submitQuery"
      />
      <el-button
        v-waves
        class="filter-item"
        type="primary"
        size="small"
        icon="el-icon-search"
        @click="submitQuery"
      >搜索</el-button>
      <el-button
        class="filter-item"
        size="small"
        icon="el-icon-delete"
        type="default"
        style="margin-left:0;"
        @click="clearQuery"
      >清空</el-button>
      <el-button
        v-waves
        class="filter-item"
        type="success"
        icon="el-icon-plus"
        @click="showCreateDialog"
      >新增应用</el-button>
    </div>
    <el-table
      :key="tableKey"
      v-loading="listLoading"
      :data="list"
      border
      fit
      highlight-current-row
      style="width: 100%;"
    >
      <el-table-column label="ID" min-width="80px" align="center">
        <template slot-scope="{row}">
          <span class="link-type">{{ row.id }}</span>
        </template>
      </el-table-column>
      <el-table-column label="clientId" min-width="150px" align="center">
        <template slot-scope="scope">
          <span>{{ scope.row.clientId }}</span>
        </template>
      </el-table-column>
      <el-table-column label="clientSecret" align="center" min-width="120px">
        <template slot-scope="scope">
          <span>{{ scope.row.clientSecret }}</span>
        </template>
      </el-table-column>
      <el-table-column label="授权类型" min-width="130px" align="center">
        <template slot-scope="scope">
          <span>{{scope.row.authorizedGrantTypes}}</span>
        </template>
      </el-table-column>
      <el-table-column label="授权范围" min-width="130px" align="center">
        <template slot-scope="scope">
          <span>{{scope.row.scope}}</span>
        </template>
      </el-table-column>
      <el-table-column
        label="操作"
        fixed="right"
        align="center"
        width="310px"
        class-name="small-padding fixed-width"
      >
        <template slot-scope="{row}">
          <el-button
            type="success"
            icon="el-icon-view"
            size="mini"
            @click="showViewDialog(row.id)"
            plain
          >查看</el-button>
          <el-button
            type="primary"
            icon="el-icon-edit"
            size="mini"
            @click="showUpdateDialog(row.id)"
            plain
          >编辑</el-button>
          <el-button
            type="danger"
            icon="el-icon-delete"
            size="mini"
            @click="deleteHandle(row.id)"
            plain
          >删除</el-button>
        </template>
      </el-table-column>
    </el-table>

    <el-dialog
      :title="titleMap[dialogStatus]"
      :lock-scroll="true"
      :visible.sync="dialogFormVisible"
      :before-close="handleClose"
    >
      <div class="dialogBody">
        <el-scrollbar wrap-class="scrollbar-wrapper">
          <el-form
            ref="form"
            :model="form"
            :rules="rules"
            label-width="80px"
            :disabled="!(dialogStatus ==='update' || dialogStatus ==='create')"
          >
            <el-row>
              <el-col :xs="24" :md="12">
                <el-form-item label="应用Id" prop="clientId">
                  <el-input v-model="form.clientId" placeholder="请输入应用Id"></el-input>
                </el-form-item>
              </el-col>
              <el-col :xs="24" :md="12">
                <el-form-item label="应用密钥" prop="clientSecretStr">
                  <el-input v-model="form.clientSecretStr" placeholder="请输入应用密钥"></el-input>
                </el-form-item>
              </el-col>
              <el-col :xs="24" :md="12">
                <el-form-item label="授权类型" prop="authorizedGrantTypes">
                  <el-input v-model="form.authorizedGrantTypes" placeholder="请输入授权类型"></el-input>
                </el-form-item>
              </el-col>
              <el-col :xs="24" :md="12">
                <el-form-item label="授权范围" prop="scope">
                  <el-input v-model="form.scope" placeholder="请输入授权范围"></el-input>
                </el-form-item>
              </el-col>
              <el-col :xs="24" :md="12">
                <el-form-item label="令牌秒数" prop="accessTokenValidity">
                  <el-input type="number" v-model="form.accessTokenValidity" placeholder="请输入令牌秒数"></el-input>
                </el-form-item>
              </el-col>
              <el-col :xs="24" :md="12">
                <el-form-item label="刷新秒数" prop="refreshTokenValidity">
                  <el-input type="number" v-model="form.refreshTokenValidity" placeholder="请输入刷新秒数"></el-input>
                </el-form-item>
              </el-col>
              <el-col :xs="24" :md="12">
                <el-form-item label="回调地址">
                  <el-input v-model="form.webServerRedirectUri" placeholder="请输入回调地址"></el-input>
                </el-form-item>
              </el-col>
              <el-col :xs="24" :md="12">
                <el-form-item label="权限">
                  <el-input v-model="form.authorities" placeholder="请输入权限集合"></el-input>
                </el-form-item>
              </el-col>
              <el-col :xs="24" :md="12">
                <el-form-item label="资源集合">
                  <el-input v-model="form.resourceIds" placeholder="请输入资源集合"></el-input>
                </el-form-item>
              </el-col>
              <el-col :xs="24" :md="12">
                <el-form-item label="自动授权">
                  <el-select v-model="form.autoapprove" placeholder="自动授权">
                    <el-option label="是" value="true"></el-option>
                    <el-option label="否" value="false"></el-option>
                  </el-select>
                </el-form-item>
              </el-col>
              <el-col :xs="24" :md="24">
                <el-form-item label="附加说明">
                  <el-input v-model="form.additionalInformation" placeholder="附加说明"></el-input>
                </el-form-item>
              </el-col>
            </el-row>
          </el-form>
        </el-scrollbar>
      </div>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogFormVisible = false">取消</el-button>
        <el-button
          type="primary"
          v-if="(dialogStatus ==='update' || dialogStatus ==='create')"
          @click="saveHandle"
        >保存</el-button>
      </div>
    </el-dialog>

    <pagination
      v-show="total>0"
      :total="total"
      :page.sync="listQuery.current"
      :limit.sync="listQuery.size"
      @pagination="getList"
    />
  </el-card>
</template>
<script>
import { page, findById, save, deleteById, updateById } from "@/api/clients";
import waves from "@/directive/waves"; // waves directive
import Pagination from "@/components/Pagination"; // secondary package based on el-pagination
import { error } from "util";
import clip from "@/utils/clipboard"; // use clipboard directly
import clipboard from "@/directive/clipboard/index.js"; // use clipboard by v-directive

export default {
  name: "Clients",
  components: { Pagination },
  directives: { waves },
  data() {
    return {
      tableKey: 0,
      list: null,
      total: 0,
      listLoading: true,
      listQuery: {
        current: 1,
        size: 10,
        clientId: undefined
      },
      rules: {
        clientId: [
          { required: true, trigger: "blur", message: "应用Id不能为空" }
        ],
        clientSecretStr: [
          { required: true, trigger: "blur", message: "应用密钥不能为空" }
        ],
        authorizedGrantTypes: [
          { required: true, trigger: "blur", message: "授权类型不能为空" }
        ],
        scope: [
          { required: true, trigger: "blur", message: "授权范围不能为空" }
        ],
        accessTokenValidity: [
          { required: true, trigger: "blur", message: "令牌秒数不能为空" }
        ],
        refreshTokenValidity: [
          { required: true, trigger: "blur", message: "刷新秒数不能为空" }
        ]
      },
      dialogFormVisible: false,
      downloadLoading: false,
      titleMap: {
        update: "编辑客户端",
        create: "新建客户端",
        view: "查看客户端"
      },
      dialogStatus: "",
      form: {}
    };
  },
  created() {
    this.getList();
  },
  methods: {
    getList() {
      this.listLoading = true;
      page(this.listQuery).then(response => {
        this.list = response.data.records;
        this.total = response.data.total;
        setTimeout(() => {
          this.listLoading = false;
        }, 1.5 * 1000);
      });
    },
    submitQuery() {
      this.listQuery.current = 1;
      this.getList();
    },
    clearQuery() {
      this.listQuery.clientId = undefined;
      this.submitQuery();
    },
    showCreateDialog() {
      this.resetForm();
      this.dialogStatus = "create";
      this.dialogFormVisible = true;
      this.form = {};
    },
    showViewDialog(id) {
      this.resetForm();
      this.dialogStatus = "view";
      findById(id).then(response => {
        this.form = response.data;
        this.form.clientSecretStr = this.form.clientSecret;
        setTimeout(() => {
          this.listLoading = false;
        }, 1.5 * 1000);
      });
      this.dialogFormVisible = true;
    },
    showUpdateDialog(id) {
      this.resetForm();
      this.dialogStatus = "update";
      findById(id).then(response => {
        this.form = response.data;
        setTimeout(() => {
          this.listLoading = false;
        }, 1.5 * 1000);
      });
      this.dialogFormVisible = true;
    },
    deleteHandle(id) {
      let me = this;
      this.$confirm("是否删除这条数据？?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning"
      }).then(() => {
        deleteById(id).then(() => {
          me.getList();
        });
      });
    },
    saveHandle() {
      let me = this;
      me.$refs.form.validate(valid => {
        if (valid) {
          this.downloadLoading = true;
          if (me.dialogStatus === "create") {
            save(this.form).then(() => {
              this.listLoading = false;
              me.dialogFormVisible = false;
              me.getList();
            });
          } else {
            updateById(this.form).then(() => {
              this.listLoading = false;
              me.dialogFormVisible = false;
              me.getList();
            });
          }
        } else {
          return false;
        }
      });
    },
    resetForm() {
      if (this.$refs.form !== undefined) {
        this.$refs.form.resetFields();
      }
    },
    clipboardSuccess() {
      this.$message({
        message: "复制成功！",
        type: "success",
        duration: 1500
      });
    },
    handleClose(done) {
      this.$confirm("确认关闭？")
        .then((_) => {
          done();
        })
        .catch((_) => {});
    },
  }
};
</script>

<style lang="scss" scoped>
.box-card {
  height: 100%;
  margin: 10px 8px;
  padding: 0;
}
.header {
  margin-bottom: 10px;
}
.dialogBody {
  height: 400px;
  overflow: hidden;
}
.scrollbar-wrapper {
  overflow-x: hidden !important;
}

.el-scrollbar__bar.is-vertical {
  right: 0px;
}

.el-scrollbar {
  height: 100%;
}
</style>

